{% extends "html/sidebar.html" %}

{% block style %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/chooseGame.css" />
{% endblock style %}

{% block script %}
    {{ block.super }}
    <script type="text/javascript" src="{{STATIC_URL}}js/chooseGame.js" ></script>
{% endblock script%}

{% block content %}
    {{ block.super }}
    {% comment %}This is where all the user's previous games are displayed. The for loop steps through all of the user's previous games and displays it to them. The user can then pick the game they wish to continues. {% endcomment %}
    <div id='gameSelectOuter'>   
        Select an existing game or Start a new one
	   {% for game in allGames %}
            <h3><a href='#' class='accordionHeader' id='accordionHeader{{game.id}}'>Game {{ game.id }}</a></h3>
            <div id='gameInfo{{game.id}}'>
                <a href='{% url travel_game.views.loadGame game.id %}'
                    class='games button'>Continue Game</a><button url='{% url travel_game.views.deleteGame game.id %}' gameid='{{game.id}}' class='button delete'>Delete Game</button></br>
                <!-- TODO put all each of these in divs and get rid of Br's -->
                Game date: {{ game.party_set.all.0.date }}</br>
                Distance from start: {{  game.party_set.all.0.distanceFromStart }}</br>
                Profession: {{ game.party_set.all.0.profession }}</br>
                Money: {{ game.party_set.all.0.money }}</br>
                Rations: {{ game.party_set.all.0.rations }}</br>
                Pace: {{ game.party_set.all.0.pace }}</br>
            </div>
        {% endfor %}          
    </div>
    <div id="dialog" style="display:none" title="Delete Game">You are about to <strong>PERMENANTLY</strong> delete a game. Are you sure?</div>
	<div id="newGame"> <a href='{% url travel_game.views.startUp %}' class='games button'>New Game</a> </div>
{% endblock content %}
